<template>
  <div>
    <div class="table_wrap">
      <div class="table_title">
        <i class="el-icon-platform-eleme"></i>
        <div>视频列表</div>
      </div>
      <el-table :data="videoList"
                style="width:100%;"
                border>
        <el-table-column label="视频名称"
                         width="190"
                         prop="Vname">
        </el-table-column>
        <el-table-column label="绑定课程"
                         width="190"
                         prop="Vstate">

        </el-table-column>
        <el-table-column label="视频时长"
                         width="190"
                         prop="Vtime">

        </el-table-column>
        <el-table-column label="上传日期"
                         width="230">
          <template slot-scope="scope">
            <div>
              {{new Date(scope.row.createAt).toLocaleString()}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="290">
          <template slot-scope="scope">
            <div>
              <el-button v-if="state"
                         type="success"
                         @click="addDirVideo(scope.row._id)">添加</el-button>
              <el-button v-if="!state"
                         type="success"
                         @click="edit(scope.row)">编辑</el-button>
              <el-button v-if="!state"
                         type="danger"
                         @click="del(scope.row.ID,scope.row._id)">删除</el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>
      <div class="page_wrap">
        <el-button type="success"
                   @click="goTop">首页</el-button>
        <el-pagination :pageSize="pageSize"
                       :total="total"
                       :current-page="pageStart"
                       @current-change="pageChange"
                       layout="prev,pager,next"
                       background>

        </el-pagination>
        <el-button type="success"
                   @click="gotEnd">尾页</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { delVideoApi } from '../../api/video'
import { addDirVideoApi } from '../../api/course'
export default {
  name: "videoTable",
  props: ["state", "CDid", "dirid"],
  created () {
    this.getVideoAction({ pageStart: 1 })
  },
  methods: {
    ...mapMutations("videoStore", ["changePage", "changeVideoFlag", "changeEditRow"]),
    ...mapMutations("courseStore", ["changevideoFlag"]),
    ...mapActions("videoStore", ["getVideoAction"]),
    ...mapActions("courseStore", ["getDirVideoAction"]),
    async addDirVideo (id) { //给对应的目录下添加视频
      console.log(this.CDid, this.dirid)
      var res = await addDirVideoApi({
        _id: this.dirid, //目录id  
        CDid: this.CDid,//课程id
        Vid: id   //视频
      })
      console.log(1231231)
      console.log(res);
      this.changevideoFlag(false)//添加完成  关闭视频添加弹出层
      this.getDirVideoAction([this.dirid, this.CDid]) //添加完成从新获取目录下的视频
    },
    pageChange (val) { //分页改变事件函数
      this.changePage(val)
      this.getVideoAction({ pageStart: val })
    },
    goTop () { //去首页
      this.changePage(1)
      this.getVideoAction({ pageStart: 1 })
    },
    gotEnd () { //去尾页
      this.changePage(this.endPage)
      this.getVideoAction({ pageStart: this.endPage })
    },
    async del (ID, _id) {//删除视频
      var res = await delVideoApi(ID, _id)
      console.log(res)
      this.getVideoAction({ pageStart: this.pageStart })
    },
    edit (row) { //点击编辑
      this.changeVideoFlag(true)//打开弹出层
      this.changeEditRow(row) //传递当前行数据到vuex
    }
  },
  computed: {
    ...mapGetters("videoStore", ["videoList", "pageSize", "pageStart", "endPage", "total"])
  }
}
</script>
<style lang="less" scoped>
.table_wrap {
  width: 80%;
  margin: 20px auto;
  .table_title {
    height: 40px;
    line-height: 40px;
    display: flex;
    border: 1px solid black;
    i {
      width: 40px;
      height: 40px;
      border-right: 1px solid black;
      font-size: 40px;
    }
    div {
      margin-left: 30px;
    }
  }
}
.page_wrap {
  width: 1300px;
  display: flex;
  .el-button {
    height: 28px;
    line-height: 4px;
  }
}
</style>